<route lang="json5" type="device">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '设备',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false
  },
}
</route>

<script lang="ts" setup>
import { ref } from 'vue'
import accountMessage from '@/components/form/account-message.vue'
import serviceFee from '@/components/form/service-fee.vue'

const tag1 = [
  {
    title: '商品分类',
    icon: 'scan',
    url: '',
    bg: 'bg1',
    type: 'scan',
  },
  {
    title: '入库日志',
    icon: 'fork',
    url: '/pages/device/deviceList',
    bg: 'bg2',
  },
  {
    title: '销售日志',
    icon: 'copy',
    url: '',
    bg: 'bg3',
  },
]

const tag2 = [
  {
    title: '银行卡管理',
    icon: 'creditcard',
    url: '',
    bg: 'bg12',
  },
  {
    title: '微信管理',
    icon: 'usb',
    url: '',
    bg: 'bg8',

  },
  {
    title: '支付宝管理',
    icon: 'bags',
    url: '',
    bg: 'bg7',
  },
]
const tag3 = [
  {
    title: '安全手机',
    desc: '改动短信验证',
    icon: 'creditcard',
    url: '',
    bg: 'bg12',
  },
  {
    title: '清除日志',
    desc: '初始日志及数据',
    icon: 'usb',
    url: '',
    bg: 'bg8',

  },
  {
    title: '注销账户',
    desc: '删除账户及数据',
    icon: 'bags',
    url: '',
    bg: 'bg7',
  },
]

const accountMessageRef = ref()
const serviceFeeRef = ref()
function handleClose() {
  // accountMessageRef.value.close()
}
</script>

<template>
  <view class="top">
    <view class="u-box">
      <view class="logo">
        <wd-img :width="60" :height="60" round src="https://wap.mch.yuntbq.com/static/img/logo.png" mode="scaleToFill" />
      </view>
      <view class="u-msg">
        <view class="flex-1">
          <view class="name">
            uid300
          </view>
          <view>电话：13800000000</view>
        </view>
        <wd-icon name="edit-outline" size="22px" @click="accountMessageRef.show = true" />
      </view>
    </view>
    <view class="top-tag">
      <wd-row>
        <wd-col :span="8">
          <view class="item">
            <!-- <wd-icon name="money-circle" size="25px" color="#3287e1" /> -->
            <view class="menu-title">
              服务费余额
            </view>
            <view class="num">
              ￥-536.68
            </view>
            <view class="i-link" @click="serviceFeeRef.show = true">
              点击充值
            </view>
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="item">
            <!-- <wd-icon name="money-circle" size="25px" color="#3287e1" /> -->
            <view class="menu-title">
              已用服务费
            </view>
            <view class="num">
              ￥-536.68
            </view>
            <view class="i-link">
              点击充值
            </view>
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="item">
            <!-- <wd-icon name="money-circle" size="25px" color="#3287e1" /> -->
            <view class="menu-title">
              账户余额
            </view>
            <view class="num">
              ￥-536.68
            </view>
            <view class="i-link">
              点击充值
            </view>
          </view>
        </wd-col>
      </wd-row>
    </view>
  </view>

  <view class="option-list">
    <view class="title">
      支付管理
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in tag1" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list">
    <view class="title">
      提现账号管理
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in tag2" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list">
    <view class="title">
      其它操作
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in tag3" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <wd-cell-group>
    <wd-cell title="商户信息配置" icon="setting" is-link to="/pages/button/index" replace>
      <view class="i-link">
        密码/手机/会员开关
      </view>
    </wd-cell>
    <wd-cell title="微信账号管理" icon="setting" is-link to="/pages/button/index" replace>
      <view>
        微信账号：<text class="i-link">
          5
        </text> 个
      </view>
    </wd-cell>
    <wd-cell title="微信登录授权" icon="setting" is-link to="/pages/button/index" replace>
      <view>
        授权微信：<text class="i-link">
          5
        </text> 个
      </view>
    </wd-cell>
    <wd-cell title="经营报表通知" icon="setting" is-link to="/pages/button/index" replace>
      <view>
        授权微信：<text class="i-link">
          5
        </text> 个
      </view>
    </wd-cell>
    <wd-cell title="设备状态通知" icon="setting" is-link to="/pages/button/index" replace>
      <view>
        授权微信：<text class="i-link">
          5
        </text> 个
      </view>
    </wd-cell>
    <wd-cell title="支付投诉通知" icon="setting" is-link to="/pages/button/index" replace>
      <view>
        授权微信：<text class="i-link">
          5
        </text> 个
      </view>
    </wd-cell>
    <wd-cell title="品牌服务配置" icon="setting" is-link to="/pages/button/index" replace />
  </wd-cell-group>
  <accountMessage ref="accountMessageRef" @close="handleClose" />
  <serviceFee ref="serviceFeeRef" @close="handleClose" />
</template>

<style lang="scss" scoped>
    .top{
        padding-top: calc(var(--status-bar-height));
        padding-bottom: 20rpx;
        background: $uni-color-primary;
        color: #ffffff;
        .u-box{
          display: flex;
          align-items: center;
          padding: 30rpx 30rpx 0;
        }
        .u-msg {
          padding: 0 20rpx;
          display: flex;
          flex:1;
          align-items: center;
          justify-content: space-between;
        }
        .top-tag {
          padding: 20rpx;
          text-align: center;
          background-color: #ffffff;
          margin: 20rpx;
          border-radius: 60px;
          color: #333;
          .item{
            margin-bottom: 0;
            :nth-child(2){
              border-left: 1px solid #eee;
              border-right: 1px solid #eee;
            }
            .num{
              color: #f9a134; // 橙色
            }
          }
        }
    }
    .pt60{
        padding-top: 60rpx;
    }
    .device-msg{
        padding: 20rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: #ffffff;
        margin: 20rpx;
        border-radius: 20rpx;
    }
    .box{
      padding: 0.625rem;
      background-color: #ffffff;
      margin: 0.625rem;
      border-radius: 0.625rem;
      color: $uni-color-success
    }
</style>
